/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="model-preview-table__container">
        <div class="table-data">
            <sf-grid>
                <sf-table ref="table"
                          :options="options_fix">
                    <sf-table-column 
                        type="index">
                        序号
                    </sf-table-column>
                    <sf-table-column 
                        v-for="(item,index) in tableHeaderList"
                        :key="index"
                        :title="item.name" 
                        :default-width="100"
                        :data-index="item.name">
                        <lang>{{ item.name }}</lang>
                    </sf-table-column>
                </sf-table>
            </sf-grid>
        </div>
    </div>
</template>
<script>
export default {
    name: 'PreviewTable',
    props:{
        tableData:{
            type:Array,
            default:()=>[]
        },
        tableHeaderList:{
            type:Array,
            default:()=>[]
        }
    },
    data () {
        return {
            options_fix: {
                bufferView: false,
                selectionHide: true,
                forceFit: false,
                data:[],

                // 高度自适应
                autoHeight: false

                // autoWidth: true

                // 配置这个后才可以实现保持勾选状态
            }
        };
    },
    watch: {
        tableData () {
            this._tableLoadData();
        }
    },
    computed: {
        dataTitle () {
            return _('共10000条待训练数据，预览仅展示前200条');
        }
    },
    mounted () {
    },
    methods: {
        _tableLoadData () {
            let table = this.$refs.table;
            /* eslint-disable */
            if (this.tableData.length > 0) {
                table && table.loadData(this.tableData);
                 this.$nextTick(() => {
                    table && table.resetColumnsWidth();
                });
            } else {
                table && table.loadData([]);
            }
        }
    }
};
</script>
<style lang="less">
    .model-preview-table__container {
        background: #fff;
        width: 100%;
        height: 100%;
        border: 1px solid #DEE3ED;
        border-top: 0;
        overflow: auto;
        .operate-step__container{
            margin: 0;
        }
        .table-data {
            height: calc(100% - 10px);
            .sfv-grid {
                height: 100%;
                display: flex;
                flex-direction: column;
                .sfv-table {
                    flex: 1;
                }
            }
        }
        
        .source-alert{
            &.sfv-alert__wrapper.sfv-alert--light.sfv-alert--warning{
                background: #FDFAF3;
                color: #884C00;
                margin: 3px 0;
                background: #FDFAF3;
                border: 1px solid rgba(173,104,0,0.08);
                border-radius: 4px;
            }
        }
    }
</style>
    